<template>
    <div class="form">
        <FormComp 
            :formobj='formObj' 
            ref='formRef'
            @Search='searchList'
            @formChange='formChange'
            @formClick='formClick'
            @clearSelect="clearSelect"
        ></FormComp>
    </div>
</template>
<script>
import FormComp from "@/components/form";
import {cascaderList,selectBigData} from '@/api/mock'

export default {
    components:{FormComp},
    data(){
        return {
            formObj:{
                id:'formId',
                //col:4,//一行放几个表单，默认为4 取值可以为3-6
                labelWidth:'120',
                //右下方按钮集合
                bottomRightButton:[
                    {
                        btnType:'button',
                        title:'导出',
                        key:'downLoad',
                        type:'warning',
                        icon:'download'
                    },
                    {
                        btnType:'popover',
                        title:'hover文字',
                        key:'popover1',
                        type:'success',
                        icon:'download',
                        content:'这是一段纯文字'
                    },
                    {
                        btnType:'popover',
                        title:'hoverHTML内容',
                        key:'popover2',
                        type:'danger',
                        placement:'top',
                        popoverHtml:"<p style='color:red'>这是一个p标签内容</p>"
                    }
                ],
                //表单右边下拉选项集合
                rightList:{
                    bigData:[],//大数据下拉框数据列表
                    commomSelect:[
                        {name:'校长',id:'1001'},
                        {name:'医生',id:'1002'},
                        {name:'员工',id:'1003'},
                        {name:'汽车',id:'1004'},
                    ],
                    selectId:[
                        {name:'校长',id:'1001'},
                        {name:'医生',id:'1002'},
                        {name:'员工',id:'1003'},
                        {name:'汽车',id:'1004'},
                    ],
                    selectOne:[
                        {label:'101',value:'101'},
                        {label:'111',value:'111'},
                    ],
                    selectTwo:[
                        {label:'202',value:'202'},
                        {label:'222',value:'222'},
                    ],
                    //此处必须
                    cascader:[]
                },
                //表单左边下拉框选项集合
                leftList:{
                    querySelectDate:[
                        {value:'1001',label:'查询时间1'},
                        {value:'1002',label:'查询时间2'},
                        {value:'1003',label:'查询时间3'}
                    ],
                    letfSelectKey:[
                        {key:'selectOne',label:'下拉1'},
                        {key:'selectTwo',label:'下拉2'},
                    ]
                },
                //表单项
                formBtnArr:[
                    {
                        type:'dateRange',
                        key:'queryDate',
                        title:'查询日期',
                        pickerOptions:{
                        onPick: obj => {
                            this.pickerMinDate = new Date(obj.minDate).getTime();
                        },
                        disabledDate: time => {
                            // 只能选择7天的日期
                            if (this.pickerMinDate) {
                            const day = 7 * 24 * 3600 * 1000;
                            let maxTime = this.pickerMinDate + day;
                            let minTime = this.pickerMinDate - day;
                            setTimeout(() => {
                                //清空掉
                                this.pickerMinDate = null;
                            }, 500);
                            return time.getTime() >= maxTime || time.getTime() <= minTime;
                            }
                        }
                        }
                    },
                    {
                        type:'dateTimeRange',
                        key:'queryTime',
                        title:'查询时间',
                    },
                    {
                        type:'inputComp',
                        key:'queryInput',
                        title:'名称',
                    },
                    {
                        type:'bigInput',
                        key:'queryBigInput',
                        title:'多行查询',
                    },
                    {
                        type:'selectDate',//左侧下拉日期框
                        selectkey:'dateKey',
                        key:'querySelectDate',
                    },
                    {
                        type:'bigSelelct',
                        title:'大数据下拉框',
                        key:'bigData',
                        clearable:true,
                        filterable:true,
                        filterMethod:(query)=>{
                            console.log("4========",query)
                            if(query !== ''){
                                setTimeout(()=>{
                                    this.formObj.rightList.bigData=this.allSelectList.filter((item,index)=>{
                                    return item.label.indexOf(query)>-1
                                    });                    
                                },300)
                            }else{
                                this.formObj.rightList.bigData=this.allSelectList;
                            }
                        }
                    },
                    {
                        type:'selectComp',
                        title:'普通下拉框',
                        key:'commomSelect',
                        optionsLabel:'name',
                        optionsValue:'id',
                    },
                    {
                        type:'selectIdComp',
                        title:'带Id下拉框',
                        key:'selectId',
                        optionsLabel:'name',
                        optionsValue:'id'
                    },
                    {
                        type:'beforeSelect',//左侧下拉的下拉框
                        key:'selectOne',
                        selectKey:'letfSelectKey'
                        // optionsLabel:'name',
                        // optionsValue:'id'
                    },
                    {
                        title:'大数据联级选择',
                        key:'cascader',
                        type:'bigDataCascader',
                        loadSize:15
                    }
                ]
            },
            allSelectList:[],
        }
    },
    mounted(){
        //大数据下拉列表
        for(let i=0;i<1000;i++){
            this.allSelectList.push({
                value:i,
                label:`第${i}行数据`
            });
        }
        this.formObj.rightList.bigData=this.allSelectList;
        //联级选择列表
        this.formObj.rightList.cascader=cascaderList;
    },
    methods:{
        searchList(){
            console.log("获取表单form取值-----",this.$refs.formRef.formItem);
        },
        //表单内容改变事件
        formChange(e,item,key){
            //item=每一个formItem，key为每个表单组件中的key
            console.log("form表单项change事件",e,item,key);
        },
        //底部右侧按钮事件
        formClick(e,key){
            console.log("右侧按钮",key)
        },
        //清除下拉框
        clearSelect(item,key){
            //key区分事哪个表单的事件
            if(key=='bigData'){
                this.formObj.rightList.bigData=this.allSelectList;
            }
        }
    }
    
}
</script>